import React, {Component} from 'react';
import {View, StyleSheet, ScrollView, ListView, Image, Text} from  'react-native';
import TopListView from './HomeTopListView';
let dimension = require('Dimensions');
let {width, height} = dimension.get('window');

let ms = require('../../img/ms.png');
let dy = require('../../img/dy.png');
let jd = require('../../img/jd.png');
let xxyl = require('../../img/xxyl.png');
let wm = require('../../img/wm.png');
let zzc = require('../../img/zzc.png');
let ktv = require('../../img/ktv.png');
let hcpjp = require('../../img/hcpjp.png');
let lr = require('../../img/lr.png');
let zby = require('../../img/zby.png');
let zlam = require('../../img/zlam.png');
let gw = require('../../img/gw.png');
let jrxd = require('../../img/jrxd.png');
let xckc = require('../../img/xckc.png');
let shfw = require('../../img/shfw.png');
let tdyp = require('../../img/tdyp.png');
let mj = require('../../img/mj.png');
let jdmp = require('../../img/jdmp.png');
let ly = require('../../img/ly.png');
let qbfl = require('../../img/qbfl.png');
import BottomCommonCell from './BottomCommonCell';

export default class HomeTopView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activePage: 0
        };
        this.onScrollAnimationEnd = this.onScrollAnimationEnd.bind(this)
    }

    render() {
        return (
            <View style={styles.container}>
                <BottomCommonCell leftIcon={qbfl} leftTitle='品牌' rightTitle='查看更多'/>
                <ScrollView horizontal={true}
                            pagingEnabled={true}
                            showsHorizontalScrollIndicator={false}
                            onMomentumScrollEnd={this.onScrollAnimationEnd}
                >
                    {HomeTopView.renderScrollItem()}
                </ScrollView>
                <View style={styles.IndicatorViewStyle}>
                    {this.renderIndicator()}
                </View>
            </View>
        )
    }

    static renderScrollItem() {
        let itemArr = [];
        let item = [[{title: "蓝带", image: ms}, {title: "百威", image: dy}, {title: "哈尔滨", image: jd}, {
            title: "燕京",
            image: xxyl
        }, {title: "青岛", image: wm},
            {title: "柏龙", image: zzc}, {title: "德拉克", image: ktv}, {title: "白兰地", image: hcpjp}, {
                title: "威士忌",
                image: lr
            }, {title: "伏加特", image: zby}
        ],
            [{title: "朗姆酒", image: zlam}, {title: "奔富系列", image: gw}, {title: "拉菲系列", image: jrxd}, {
                title: "里肯系列",
                image: xckc
            }, {title: "卡斯特系列", image: shfw},
                {title: "五粮液", image: tdyp}, {title: "剑南春", image: mj}, {title: "茅台", image: jdmp}, {
                title: "泸州老窖",
                image: ly
            }, {title: "全部品牌", image: qbfl}]];
        for (let i = 0; i < item.length; i++) {
            itemArr.push(
                <TopListView dataArr={item[i]} key={i}/>
            );
        }
        return itemArr;
    }

    renderIndicator() {
        let indicatorArr = [], style;
        for (let i = 0; i < 2; i++) {
            style = (i === this.state.activePage ? {color: 'orange'} : {color: 'gray'})
            indicatorArr.push(
                <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
            )
        }
        return indicatorArr;
    }

    ///当滚动结束后调用
    onScrollAnimationEnd(e) {
        let currentPage = Math.floor(e.nativeEvent.contentOffset.x / width);
        this.setState({
            activePage: currentPage
        });
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        marginTop: 20
    },
    textStyle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    IndicatorViewStyle: {
        flexDirection: 'row',
        justifyContent: 'center'
    }
});
